<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        table{
            width:600px;
            height:500px;
            padding:0;
            border-collapse: collapse;
        }
        td{
            width:100px;
        }
    </style>

</head>
<body>
<div id="app">
    <div v-if="books.length>0">
        <table border="2px">
            <th>&nbsp;</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>

            <tr v-for="(book,index) in books">
                <td>
                    {{index}}    <!-- 序号 -->
                </td>
                <td>{{book.name}}</td>
                <td>{{book.pushDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="redBtn(index)">-</button>  <!--点击按钮，对应的buyNum减一 -->
                    {{book.buyNum}}
                    <button @click = "addBtn(index)">+</button> <!--点击按钮，对应的buyNum加一 -->
                </td>
                <td>
                    <button @click = "remove(index)">移除</button> <!--点击按钮，移除对应数据 -->
                </td>
            </tr>
            <tr>
                <td colspan="6">总价:{{price}}</td>
            </tr>
        </table>
    </div>
    <h2 v-else>购物车为空</h2>

</div>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            books :[{
                name: '《java编程思想》',
                pushDate : '2020-9',
                price : '￥98.00',
                buyNum : 1
            },{
                name: '《数据分析与数据原理》',
                pushDate : '2019-2',
                price : '￥39.00',
                buyNum : 1
            },{
                name: '《Handoop权威指南》',
                pushDate : '2019-10',
                price : '￥59.00',
                buyNum : 1
            },{
                name: '《代码大全》',
                pushDate : '2018-8',
                price : '￥128.00',
                buyNum : 1

            }],
        },
        methods : {
            addBtn(index){
                this.books[index].buyNum++;
            },
            redBtn(index){
                if(this.books[index].buyNum <=1){
                    alert("购买数至少大于等于1");
                }else{
                    this.books[index].buyNum--;
                }

            },
            remove(index){
                    this.books.splice(index,1); //移除
            }
        },
        computed:{
            price(){
                let sum=0;
                //   ===普通for循环实现遍历===
                // for(let i=0;i<this.books.length;i++){
                //     sum+=(parseFloat(this.books[i].price.slice(1))*this.books[i].buyNum);
                // }

                // === for in实现遍历
                // for(let i in this.books){
                //     sum+=(parseFloat(this.books[i].price.slice(1))*this.books[i].buyNum);
                // }

                // === for of实现遍历
                // for(let item of this.books){
                //     sum+=(parseFloat(item.price.slice(1))*item.buyNum);
                // }

                // === reduce实现遍历===
                //slice可用其他方法代替，不要忘记括号后面的0，这是对prevalue进行初始化为0的操作，否则计算会有问题
                sum = this.books.reduce((prevalue,item)=>(prevalue+parseFloat(item.price.slice(1))*item.buyNum),0);

                return '￥'+ sum.toFixed(2); //toFixed作用：保留两位小数

                //编程范式：命令式编程/声明式编程/
                //编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
            }
        }
    })
</script>

</body>
</html>